<!-- 博客分类推荐页 -->

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const categories = ref([
  {
    id: 1,
    name: '游戏讨论',
    icon: 'VideoCameraFilled',
    posts: '125.8万',
    followers: '23.5万',
    isFollowing: false,
    bgColor: 'bg-indigo-50',
    iconColor: 'text-indigo-500',
    description: '最新游戏资讯，游戏攻略分享，玩家交流互动'
  },
  {
    id: 2,
    name: '二次元',
    icon: 'PictureFilled',
    posts: '89.2万',
    followers: '18.6万',
    isFollowing: true,
    bgColor: 'bg-pink-50',
    iconColor: 'text-pink-500',
    description: '动漫、漫画、轻小说讨论，二次元同好交流'
  },
  {
    id: 3,
    name: '手机数码',
    icon: 'Iphone',
    posts: '56.4万',
    followers: '12.3万',
    isFollowing: false,
    bgColor: 'bg-blue-50',
    iconColor: 'text-blue-500',
    description: '手机、平板、智能设备评测与交流'
  },
  {
    id: 4,
    name: '摄影分享',
    icon: 'Camera',
    posts: '34.7万',
    followers: '8.9万',
    isFollowing: false,
    bgColor: 'bg-green-50',
    iconColor: 'text-green-500',
    description: '摄影技巧、器材交流、作品分享'
  },
  {
    id: 5,
    name: '美食天地',
    icon: 'Food',
    posts: '78.3万',
    followers: '15.4万',
    isFollowing: false,
    bgColor: 'bg-orange-50',
    iconColor: 'text-orange-500',
    description: '美食推荐、烹饪技巧、餐厅点评'
  },
  {
    id: 6,
    name: '旅行探索',
    icon: 'Location',
    posts: '45.6万',
    followers: '10.2万',
    isFollowing: false,
    bgColor: 'bg-cyan-50',
    iconColor: 'text-cyan-500',
    description: '旅行攻略、景点推荐、旅行日记'
  }
])

// 切换关注状态
const toggleFollow = (category: any) => {
  category.isFollowing = !category.isFollowing
}

// 进入分类详情
const goToCategory = (id: number) => {
  router.push(`/forum/category/${id}`)
}
</script>

<template>
  <div class="space-y-6">
    <!-- 页面标题 -->
    <div class="flex items-center justify-between">
      <div>
        <h2 class="text-2xl font-bold">论坛版块</h2>
        <p class="text-gray-500 mt-1">发现感兴趣的话题，加入志同道合的社区</p>
      </div>
      <el-button type="primary">
        <el-icon class="mr-1"><Plus /></el-icon>
        创建分类
      </el-button>
    </div>

    <!-- 分类列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div
        v-for="category in categories"
        :key="category.id"
        class="bg-white rounded-lg p-4 transition-all hover:shadow-lg"
      >
        <div class="flex items-start gap-4">
          <!-- 图标 -->
          <div
            :class="[
              category.bgColor,
              'w-12 h-12 rounded-lg flex items-center justify-center'
            ]"
          >
            <el-icon :class="[category.iconColor, 'text-2xl']">
              <component :is="category.icon" />
            </el-icon>
          </div>

          <!-- 内容 -->
          <div class="flex-1 min-w-0">
            <div class="flex items-start justify-between gap-4">
              <div>
                <h3
                  class="text-lg font-bold hover:text-blue-500 cursor-pointer truncate"
                  @click="goToCategory(category.id)"
                >
                  {{ category.name }}
                </h3>
                <p class="text-gray-500 text-sm mt-1 line-clamp-1">
                  {{ category.description }}
                </p>
              </div>
              <el-button
                :type="category.isFollowing ? 'default' : 'primary'"
                size="small"
                class="shrink-0"
                @click.stop="toggleFollow(category)"
              >
                {{ category.isFollowing ? '已关注' : '关注' }}
              </el-button>
            </div>

            <!-- 统计信息 -->
            <div class="flex items-center gap-6 mt-3 text-sm text-gray-500">
              <span class="flex items-center gap-1">
                <el-icon><Document /></el-icon>
                {{ category.posts }} 帖子
              </span>
              <span class="flex items-center gap-1">
                <el-icon><User /></el-icon>
                {{ category.followers }} 关注
              </span>
              <el-button
                link
                class="flex items-center gap-1 ml-auto text-blue-500 cursor-pointer"
                @click="goToCategory(category.id)"
              >
                <el-icon><ArrowRight /></el-icon>
                进入
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载更多 -->
    <div class="text-center">
      <el-button link>
        加载更多
        <el-icon class="ml-1"><ArrowDown /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
// .category-card {
//   @apply relative overflow-hidden;

//   &:hover {
//     .category-enter {
//       @apply opacity-100;
//     }
//   }
// }

// .category-enter {
//   @apply absolute right-4 top-1/2 -translate-y-1/2 opacity-0 transition-opacity;
// }
</style>
